<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:s="http://jboss.com/products/seam/taglib"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a="http://richfaces.org/a4j"
    template="layout/templateList.xhtml">

<ui:define name="body">

	<table align="right">
		<tr>
			<td>
				<h:commandButton immediate="true"
					onclick="abrirPopup('help_online/help_cliente.seam');" 
					title="Ajuda Online"
					alt="Ajuda Online"
					image="img/help_peq.jpg"/>
			</td>
		</tr>
	</table>
	
	<h2 class="title"><a href="#">Gerenciar Clientes</a></h2><br/>
	
            <h:form id="clientesForm">
            
            	<rich:tabPanel switchType="client">
			        <rich:tab label="Dados do Cliente">
			           <h:panelGrid columns="1">
			            	<s:decorate template="/layout/edit.xhtml">
			            		<ui:define name="label">Nome:</ui:define>
			            		<h:inputText value="#{manterClienteController.clienteEdicao.dscNome}"
			            			required="true"
			            			maxlength="200"
			            			onkeydown="Mascara(this,Maiusculo)"
									onkeyup="Mascara(this,Maiusculo)"
			            			style="width: 300px;"/>
			            	</s:decorate>
			            	
			            	<s:decorate template="/layout/edit.xhtml">
			            		<ui:define name="label">Telefone Celular:</ui:define>
			            		<h:inputText value="#{manterClienteController.clienteEdicao.telCelular}"
			            			required="false"
			            			maxlength="14"
			            			style="width: 200px;"
			            			onkeydown="Mascara(this,Telefone);"
			            			onkeyup="Mascara(this,Telefone);"/>
			            	</s:decorate>
			            	
			            	<s:decorate template="/layout/edit.xhtml">
			            		<ui:define name="label">Telefone Residencial:</ui:define>
			            		<h:inputText value="#{manterClienteController.clienteEdicao.telResidencial}"
			            			required="false"
			            			maxlength="14"
			            			style="width: 200px;"
			            			onkeydown="Mascara(this,Telefone);"
			            			onkeyup="Mascara(this,Telefone);"/>
			            	</s:decorate>
			            	
			            	<s:decorate template="/layout/edit.xhtml">
			            		<ui:define name="label">Endereço:</ui:define>
			            		<h:inputText value="#{manterClienteController.clienteEdicao.dscEndereco}"
			            			required="true"
			            			onkeydown="Mascara(this,Maiusculo)"
									onkeyup="Mascara(this,Maiusculo)"
			            			maxlength="200"
			            			style="width: 400px;"/>
			            	</s:decorate>
			            	
			            	<s:decorate template="/layout/edit.xhtml">
			            		<ui:define name="label">Cidade:</ui:define>
			            		<h:inputText value="#{manterClienteController.clienteEdicao.dscCidade}"
			            			required="true"
			            			maxlength="100"
			            			onkeydown="Mascara(this,Maiusculo)"
									onkeyup="Mascara(this,Maiusculo)"
			            			style="width: 300px;"/>
			            	</s:decorate>
			            	
			            	<s:decorate template="/layout/edit.xhtml">
			            		<ui:define name="label">E-mail:</ui:define>
			            		<h:inputText value="#{manterClienteController.clienteEdicao.dscEmail}"
			            			required="false"
			            			validator="validadorEmail"
			            			maxlength="200"
			            			style="width: 300px;"/>
			            	</s:decorate>
			            	
			            </h:panelGrid>
			        </rich:tab>
			        <rich:tab label="Dados do Pet">
			        	<br/>
			            <rich:dataTable value="#{manterClienteController.listaPets}" var="_pet"
			            	rows="7" id="tabelaPets">
			            	<rich:column>
			            		<f:facet name="header">
			            			<h:selectBooleanCheckbox value="#{manterClienteController.selecionadoTodosPets}">
			            				<a:support event="onchange" action="#{manterClienteController.selecionaTodosPets()}"
			            					reRender="tabelaPets"/>
			            			</h:selectBooleanCheckbox>
			            		</f:facet>
			            		<h:selectBooleanCheckbox value="#{_pet.selecionado}" />
			            	</rich:column>
			            	
			            	<rich:column>
			            		<f:facet name="header">NOME</f:facet>
			            		<s:decorate template="/layout/editTable.xhtml">
			            			<h:inputText value="#{_pet.dscNome}"
			            				maxlength="100"
			            				required="false"
			            				onkeydown="Mascara(this,Maiusculo)"
										onkeyup="Mascara(this,Maiusculo)"
			            				style="width: 200px;"/>
			            		</s:decorate>
			            	</rich:column>
			            	
			            	<rich:column>
			            		<f:facet name="header">RAÇA</f:facet>
			            		<s:decorate template="/layout/editTable.xhtml">
			            		
			            			<h:inputText value="#{_pet.nomeRacaSelecionada}" id="racas"
			            				onkeydown="Mascara(this,Maiusculo)"
										onkeyup="Mascara(this,Maiusculo)"/>
			            				<rich:suggestionbox id="sugestoesRacas" for="racas" 
			            					suggestionAction="#{manterClienteController.autocomplete}" 
			            					var="_raca" width="350" height="300" rules="none" 
			            					minChars="1"  fetchValue="#{_raca.dscNome}" 
			            					rows="3">
			            					<rich:column>
			            						<h:outputText value="#{_raca.dscNome}" />
			            					</rich:column>
			            					<a:support event="onselect" ajaxSingle="true"> 
												<f:setPropertyActionListener 
													value="#{_raca.idRaca}" 
													target="#{_pet.idRacaSelecionada}"/> 
											</a:support> 
			            				</rich:suggestionbox> 
			            		</s:decorate>
			            	</rich:column>
			            	
			            	<rich:column>
			            		<f:facet name="header">COR</f:facet>
			            		<s:decorate template="/layout/editTable.xhtml">
			            			<h:inputText value="#{_pet.dscCorPelagem}"
			            				maxlength="100"
			            				onkeydown="Mascara(this,Maiusculo)"
										onkeyup="Mascara(this,Maiusculo)"
			            				style="width: 100px;"
			            				required="false"/>
			            		</s:decorate>
			            	</rich:column>
			            	
			            	<rich:column rendered="false">
			            		<f:facet name="header">PORTE</f:facet>
			            		<s:decorate template="/layout/editTable.xhtml">
			            			<h:selectOneMenu value="#{_pet.porte}"
			            				required="false">
			            				<f:selectItem itemLabel="SELECIONE" itemValue=""/>
			            				<f:selectItem itemLabel="PEQUENO" itemValue="P"/>
			            				<f:selectItem itemLabel="MÉDIO" itemValue="M"/>
			            				<f:selectItem itemLabel="GRANDE" itemValue="G"/>
			            			</h:selectOneMenu>
			            		</s:decorate>
			            	</rich:column>
			            	
			            </rich:dataTable>
			            <rich:datascroller for="tabelaPets"/>
			            
			            <br/>
			            <div class="actionButtons">
				        	<a:commandButton id="newPet" value="Novo" 
				        		action="#{manterClienteController.novoPet}"
				        		reRender="tabelaPets"/>
				        		
				        	<a:commandButton id="removePet" value="Excluir" 
				        		action="#{manterClienteController.excluirPet()}" 
				        		onclick="javascript:if(!confirm('Tem certeza que deseja excluir o(s) pet(s) selecionado(s)'))return false;"
				        		reRender="tabelaPets"/>
				        		
				        </div>
			        </rich:tab>
			    </rich:tabPanel>
            	
	            
	            <br/>
	            <div class="actionButtons">
		        	<h:commandButton id="submit" value="Salvar" action="#{manterClienteController.salvar}"
		            	onclick="javascript:if(!confirm('Tem certeza que deseja salvar?'))return false;"/>
		            	
		            <a:commandButton id="cancel" value="Cancelar" 
				        		action="#{manterClienteController.cancelar}" 
				        		ajaxSingle="true"
				        		reRender="clientesForm"/>
		        </div>
				<br/><br/>
				
				<h2 class="title"><a href="#">Histórico</a></h2><br/>
				
				<rich:dataTable value="#{manterClienteController.listaPedidos}"
					id="tabelaPedidos"
					var="_ped"
					rows="5">
					<f:facet name="header">
						<rich:columnGroup>
							<rich:column colspan="4">PEDIDOS</rich:column>
						</rich:columnGroup>
					</f:facet>
					
					<rich:column style="text-align: center;">
						<f:facet name="header">Data</f:facet>
						<h:outputText value="#{_ped.dtaPedido}">
							<s:convertDateTime pattern="dd/MM/yyyy"/>
						</h:outputText>
					</rich:column>
					
					<rich:column style="text-align: center;">
						<f:facet name="header">Valor</f:facet>
						<h:outputText value="R$ " />
						<h:outputText value="#{_ped.vlrPedido}" converter="conversorMonetario"/>
					</rich:column>
					
					<rich:column style="text-align: center;">
						<f:facet name="header">Pago?</f:facet>
						<h:outputText value="SIM" rendered="#{_ped.flgPago == 'T'}"/>
						<h:outputText value="NÃO" rendered="#{_ped.flgPago == 'F'}"/>
					</rich:column>
					
					<rich:column style="text-align: center;">
						<f:facet name="header">Forma Pagamento</f:facet>
						<h:outputText value="#{_ped.formaPagamento.dscFormaPagamento}"/>
					</rich:column>
					
					<f:facet name="footer">
						<rich:datascroller for="tabelaPedidos" renderIfSinglePage="false"/>	
					</f:facet>
				</rich:dataTable>
				<br/>
				<rich:dataTable value="#{manterClienteController.listaProntuarios}"
					id="tabelaProntuarios"
					var="_pront"
					rows="5">
					<f:facet name="header">
						<rich:columnGroup>
							<rich:column colspan="4">ATENDIMENTOS</rich:column>
						</rich:columnGroup>
					</f:facet>
					
					<rich:column style="text-align: center;">
						<f:facet name="header">Data</f:facet>
						<h:outputText value="#{_pront.dtaAtendimento}">
							<s:convertDateTime pattern="dd/MM/yyyy"/>
						</h:outputText>
					</rich:column>
					
					<rich:column style="text-align: center;">
						<f:facet name="header">Valor</f:facet>
						<h:outputText value="R$ " />
						<h:outputText value="#{_pront.vlrAtendimento}" converter="conversorMonetario"/>
					</rich:column>
					
					<rich:column style="text-align: center;">
						<f:facet name="header">Pago?</f:facet>
						<h:outputText value="SIM" rendered="#{_pront.flgPago == 'T'}"/>
						<h:outputText value="NÃO" rendered="#{_pront.flgPago == 'F'}"/>
					</rich:column>
					
					<rich:column style="text-align: center;">
						<f:facet name="header">Forma Pagamento</f:facet>
						<h:outputText value="#{_pront.formaPagamento.dscFormaPagamento}"/>
					</rich:column>
					
					<f:facet name="footer">
						<rich:datascroller for="tabelaProntuarios" renderIfSinglePage="false"/>	
					</f:facet>
				</rich:dataTable>
				
			</h:form>
			
 </ui:define>
</ui:composition>
